<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" name="uname" id="uname"><br>
    密码：<input type="password" name="upwd" id="upwd"><br>
    <img src="http://127.0.0.1:3000/users/v1/code" id="code2" alt="">
    验证码：<input type="text" name="code1" id="code"><br>
    <button id="btn" onclick="login()">登录</button>
    <script>
        function login(){
            var _uname = uname.value;
            var _upwd = upwd.value;
            var _code = code.value;
            if (!_uname) {
                alert("用户名不能为空");return
            }
            if (!_upwd) {
                alert("密码不能为空");return
            }
            if (!_code) {
                alert("验证码不能为空");return
            }
            // 创建xhr异步对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange= function(){
                if (xhr.readyState==4 && xhr.status==200) {
                    var text = xhr.responseText;
                    if (text == 1) {
                        alert("登录成功");
                        // js跳转页面
                    }else{
                        alert("用户名或者密码错误")
                    }
                }
            }
            // 创建请求
            xhr.open('post','/users/v1/login',true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 发送请求
            xhr.send(`uname=${_uname}&upwd=${_upwd}&code=${_code}`);
        }
    </script>
</body>
</html>